import React, {useState}  from 'react'
import {flushSync} from 'react-dom'
import './style/index.css'
import A from './components/A';
import B from './components/B';
import C from './components/C';


export function App(props){
  const [count, setCount] = useState(0);
  const [username, setUsername] = useState('Guest');

  return (
    <div>
      <h2>{count}</h2>
      <h2>{username}</h2>
      <A></A>
      <B></B>
      <C></C>

      <button onClick={()=>{
        flushSync(()=>{
          setCount(count + 1);
        })
        flushSync(()=>{
          setUsername('Guest' + count);
        })
        // console.log(count + ' ' + username);
     
      }}>改变state</button>
    </div>
  )
}  
